<template>
    <el-header class="el-header">
        <div class="header-content">
            <div class="header-start">
                <h2 class="header-left" @click="goHome">星火商店</h2>
            </div>
            <div class="header-end">
                <el-input placeholder="请输入内容" v-model="searchKeywords" class="input-search">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
                <el-divider direction="vertical" class="divider"></el-divider>

                <el-popover
                    placement="bottom"
                    width="160"
                    trigger="manual"
                    v-model="optionPopoverVisable"
                >
                    <div @mouseenter="handleLoginMouseEnter" @mouseleave="handleLoginMouseLeave">
                        <el-row class="option-popover-button">
                            <el-button type="plain" @click="handleValidateButtonClick">审核应用</el-button>
                        </el-row>
                        <el-row class="option-popover-button">
                            <el-button type="plain" @click="handleImportButtonClick">导入JSON</el-button>
                        </el-row>
                        <el-row class="option-popover-button">
                            <el-button type="plain" @click="handleLogoutButtonClick">退出登录</el-button>
                        </el-row>
                    </div>
                    <el-button
                        type="primary"
                        slot="reference"
                        @click="handleLoginButtonClick"
                        @mouseenter.native="handleLoginMouseEnter"
                        @mouseleave="handleLoginMouseLeave"
                    >{{loginButtonContent}}</el-button>
                </el-popover>

                <el-dialog title="登录" :visible.sync="loginDialogVisible" width="30%">
                    <loginComponent @loginSuccess="handleLoginSuccess"></loginComponent>
                </el-dialog>
            </div>
        </div>
    </el-header>
</template>

<script>
import { searchDeb, checkLogin, logout, importAllDeb } from "../util/myRequests";
import loginComponent from "./login";

export default {
    name: "headerComponent",
    components: { loginComponent },
    data() {
        return {
            username: "asd",
            searchKeywords: "",
            loginDialogVisible: false,
            loginButtonContent: "",
            optionPopoverVisable: false,
        };
    },
    mounted() {
        this.getLoginButtonContent();
    },
    methods: {
        addRequest() {
            this.$router.push({ name: "add" });
        },
        search() {

            if(this.searchKeywords.trim() == ""){
                return;
            }

            searchDeb(this.searchKeywords.split(" "))
                .then((res) => {
                    console.log(res);
                    this.$store.commit("setSearchResult", res);
                    this.$router.push({ name: "search" });
                })
                .catch((error) => console.log(error));
        },
        goHome() {
            this.$router.push({ name: "home" });
        },
        handleLoginSuccess() {
            this.loginDialogVisible = false;
            this.getLoginButtonContent();
        },
        getLoginButtonContent() {
            checkLogin()
                .then((res) => {
                    this.loginButtonContent = `您好,${res["admin_nickname"]}指挥官`;
                    this.$cookies.set("admin_id", res["admin_id"]);
                    this.$cookies.set("admin_name", res["admin_name"]);
                    this.$cookies.set("admin_nickname", res["admin_nickname"]);
                })
                .catch((error) => {
                    console.log(error);
                    this.$cookies.remove("admin_id");
                    this.$cookies.remove("admin_name");
                    this.$cookies.remove("admin_nickname");
                    this.loginButtonContent = "伞兵一号LBW准备就绪";
                });
        },
        handleLoginButtonClick() {
            var admin_id = this.$cookies.get("admin_id");
            if (
                admin_id == "undefined" ||
                admin_id == undefined ||
                admin_id <= 0
            ) {
                this.loginDialogVisible = true;
            } else {
                this.loginDialogVisible = false;
            }
        },
        handleValidateButtonClick() {
            this.$router.push({ name: "validate" });
        },
        handleLogoutButtonClick() {
            logout()
                .then((res) => {
                    this.$cookies.remove("admin_id");
                    this.$cookies.remove("admin_name");
                    this.$cookies.remove("admin_nickname");
                    this.getLoginButtonContent();
                })
                .catch((error) => console.log(error));
        },
        handleLoginMouseEnter() {
            var admin_id = this.$cookies.get("admin_id");
            if (
                admin_id == "undefined" ||
                admin_id == undefined ||
                admin_id <= 0
            ) {
                this.optionPopoverVisable = false;
            } else {
                this.optionPopoverVisable = true;
            }
        },
        handleLoginMouseLeave() {
            this.optionPopoverVisable = false;
        },
        handleImportButtonClick() {
            importAllDeb()
        }
    },
};
</script>

<style>
.el-header {
    background-color: white;
    box-shadow: 0 0 2px #888888;
    /* color: white; */
    /* position: fixed;
    z-index: 1024; */
    /* width: 100%; */
    display: flex;
    align-items: center;
    margin: -10px -10px 0px -10px;
    padding-right: 40px;
    height: 60px !important;
}

.el-header .header-content {
    width: 70%;
    margin: 0 auto;
    display: inline-flex;
    justify-content: space-between;
    align-content: center;
}

.el-header .header-start {
    /* justify-self: start; */
}

.el-header .header-end {
    width: 50%;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
}

.header-button-height {
    height: 24px !important;
    padding-top: 4px !important;
}

.input-search {
    /* width: 50%; */
}

.header-left {
    cursor: pointer;
    /* margin-left: 10px;
    width: 90%;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: flex-start; */
}

.divider {
    margin-left: 30px;
    margin-right: 30px;
}

.option-popover-button {
    width: 100%;
    margin-top: 4px;
}
.option-popover-button .el-button {
    width: 100%;
}
</style>